<template>
	<div class="app">
		<myNavbar title="会员卡"></myNavbar>
		<div class="mine-container">
			<div class="bg"></div>
			<image class="vein" src="http://cdn.rzico.com/v4.0/mine-bg.png"></image>
			<list>
				<cell>
					<div class="mine" style="margin-top: 30px;">
						<div class="mine-top">
							<div class="mine-top-info flex" @click="toEditMember">
								<div class="flex" >
									<div class="mine-top-head">
										 <img style="width: 100px;height: 100px;border-radius: 300px" :src="memberInfo.avatar" ></img>
									</div>
									<div ><text class="mine-top-name">{{ memberInfo.name }}</text></div>
								</div>
								<div class="mine-top-vip">
									<text class="mine-top-vip-inner">{{ memberInfo.vipName }}</text>
								</div>
							</div>
						</div>

                        <div class="mine-browse flex">
                            <div class="mine-browse-favorite" @click="toFavorite">
                                <div>
                                    <text style="font-size: 30px;">{{ favoriteNum }}</text>
                                </div>
                                <text class="mine-browse_title">收藏夹</text>
                            </div>
                            <div class="mine-browse-footprint" @click="toFootprint">
                                <div>
                                    <text style="font-size: 30px;">{{ footprint }}</text>
                                </div>
                                <text class="mine-browse_title">足迹</text>
                            </div>
                            <div class="mine-browse-address" @click="toCoupon">
                                <div>
                                    <text style="font-size: 30px;">{{ couponNum }}</text>
                                </div>
                                <text class="mine-browse_title">优惠券</text>
                            </div>
                        </div>

						<wallet :id="id"></wallet>
						<order></order>
						<div class="mine-list bs">
							<div class="mine-list-item" @click="toAddress">
								<div class="mine-list-right">
									 <text class="mine-list-icon">&#xe608;</text>
									<text class="mine-list-item-title">收货地址</text>
								</div>
								<text class="title2">&#xe61f;</text>
							</div>

							<div class="mine-list-item" @click="toWater">
								<div class="mine-list-right">
									<text class="mine-list-icon">&#xe61b;</text>
									<text class="mine-list-item-title">电子水票</text>
								</div>
								<text class="title2">&#xe61f;</text>
							</div>
							<div class="mine-list-item" @click="toDeposit">
								<div class="mine-list-right">
									<text class="mine-list-icon">&#xe665;</text>
									<text class="mine-list-item-title">空桶押金</text>
								</div>
								<text class="title2">&#xe61f;</text>
							</div>
							<div class="mine-list-item" @click="toShopping">
								<div class="mine-list-right">
									<text class="mine-list-icon">&#xe606;</text>
									<text class="mine-list-item-title">消费记录</text>
								</div>
								<text class="title2">&#xe61f;</text>
							</div>
							<div class="mine-list-item" @click="toDistribution">
								<div class="mine-list-right">
									<text class="mine-list-icon">&#xe622;</text>
									<text class="mine-list-item-title">推广中心</text>
								</div>
								<text class="title2">&#xe61f;</text>
							</div>
						</div>

						<!-- <div class="mine-server" @click="toCall">
							<div>
								<text class="mine-server-item">点击拨打客服热线:{{ mch.mobile }}</text>
							</div>
							<div><text class="mine-server-item">服务时间：工作日9：00-20：00</text></div>
						</div> -->
						<div class="gap"></div>
					</div>
				</cell>
			</list>
		</div>
	</div>

</template>
<script>
	import {
	    couponCount,list
	} from '../../../api/coupon';

	import {
	    traceCount
	} from '../../../api/trace';

	import {
	    favoritesCount
	} from '../../../api/favorite';
	import {
		find,
		getInfo
	} from '../../../api/member.js'
	import wallet from '../../../components/wallet/wallet.vue'
	import myNavbar from '../../../components/myNavbar/myNavbar.vue'
	const storage = weex.requireModule('storage')
	export default {
		name: '',
		data() {
			return {
				favoriteNum: 0,
				footprint: 0,
				couponNum: 0,
				id: '',
				memberInfo: {}
			}
		},
		created() { // 在实例创建完成后被立即调用
			this.id = app.config.params
			this.initIconFont()
			this.loadMember()
			this.getTraceCount()
			this.getFavoritesCount()
			this.getCouponData()
		},
		methods: {
			getCouponData() {
			    list({
					memberId:this.id,
			        pageSize: 1000
			    }).then(res => {
			        this.couponNum = res.data.data.length

			    })
			},

			toEditMember() {
				eeui.openPage({
					url: 'root://pages/member/memberInfo/editMember/editMember.js',
					params: this.id,
					statusBarType: 'immersion',
					statusBarStyle: false
				}, res => {
					if (res.status == 'stop') {
						storage.getItem('editMember', result => {
							if (result.data == 'edit') {
								this.loadMember()
								storage.removeItem('editMember')
								storage.setItem('memberInfo', 'edit')
							}
						});
					}
				})
			},
			toDistribution(){
				const eeui = app.requireModule('eeui');
				eeui.openPage({
						url: 'root://pages/member/distribution/distribution.js',
						statusBarType: 'immersion',
						params: this.id,
						statusBarStyle: false
					},
					(result) => {

					}
				);
			},
			toFavorite() {
				const eeui = app.requireModule('eeui');
				eeui.openPage({
						url: 'root://pages/member/favorite/favorite.js',
						statusBarType: 'immersion',
						params: this.id,
						statusBarStyle: false
					},
					(result) => {

					}
				);
			},
			toShopping(){
				eeui.openPage({
					url: 'root://pages/member/shoppingHistory/shoppingHistory.js',
					params: this.id,
					statusBarType: 'immersion',
					statusBarStyle: false
				})
			},
			toFootprint() {
				const eeui = app.requireModule('eeui');
				eeui.openPage({
						url: 'root://pages/member/footprint/footprint.js',
						params: this.id,
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {

					}
				);
			},
			toCoupon() {
				const eeui = app.requireModule('eeui');
				eeui.openPage({
						url: 'root://pages/member/coupon/coupon.js',
						statusBarType: 'immersion',
						params: this.id,
						statusBarStyle: false
					},
					(result) => {

					}
				);
			},
			toDeposit() {
				eeui.openPage({
					url: 'root://pages/member/memberInfo/emptyBarrel/emptyBarrel.js',
					params: this.id,
					statusBarType: 'immersion',
					statusBarStyle: false
				})
			},
			toWater() {
				eeui.openPage({
					url: 'root://pages/member/memberInfo/water/water.js',
					params: this.id,
					statusBarType: 'immersion',
					statusBarStyle: false
				})
			},
			toEdit() {
				eeui.openPage({
					url: 'root://pages/member/memberInfo/editMember/editMember.js',
					params: this.id,
					statusBarType: 'immersion',
					statusBarStyle: false
				})
			},
			toAddress() {
			    var form = {
			        memberId:this.id
                }
				eeui.openPage({
					url: 'root://pages/member/address/address.js',
					params: form,
					statusBarType: 'immersion',
					statusBarStyle: false
				})
			},
			getTraceCount() {
			    traceCount({
					memberId:this.id
				}).then(
			        res => {
			            if (res.type == 'success') {
			                this.footprint = res.data
			            }
			        }
			    ).catch(error => {

			    })
			},
			getFavoritesCount() {
			    favoritesCount({
					memberId:this.id
				}).then(
			        res => {
			            this.favoriteNum = res.data
			        }
			    ).catch(error => {

			    })
			},
			toSaveCard() {

			},
			toShopCard() {

			},
			loadMember() {
				find(this.id).then(res => {
					if (!res.data.member.avatar) {
						res.data.member.avatar = 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/avatar.png'
					}

					this.memberInfo = res.data.member

				})
			}
		},
		components: {
			myNavbar,
			wallet
		},
	}
</script>

<style scoped>
	.app {
		flex: 1;
		background-color: rgb(248, 248, 248);

	}

	.order {
		height: 130px;
		margin-top: 30px;
	}

	.flex {
		flex-direction: row;
		align-items: center;
	}
	.mine-list-icon {
	    font-family: iconfont2;
	    font-size: 30px;
	    margin: 0 20px;
	}
	.mine-container {
		position: relative;
		background-color: rgba(248, 248, 248, 1);
	}

	.title2 {
	    font-size: 30px;
	    font-family: iconfont2;
	    margin: 0 20px;
	    color: rgba(26, 26, 30, 1);
	    opacity: 0.5;
	}
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 750px;
		height: 600px;
		background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgba(248, 248, 248, 1));
	}

	.vein {
		position: absolute;
		width: 750px;
		height: 600px;
	}

	.mine {}

	.mine-top {
		margin: 0 30px;
		height: 185px;
		position: relative;
	}

	.mine-top-info {
		position: absolute;
		left: 20px;
		top: 40px;
		align-items: center;
	}

	.mine-top-head {
		width: 105px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 105px;
		/* display: block */
		border-radius: 300px;
        border-style: solid;
        border-width: 5px;
        border-color: #fff;
	}

	.mine-top-name {
		margin-left: 20px;
		font-size: 32px;
		font-family: PingFangSC;
		font-weight: bold;
		color: rgba(26, 26, 30, 1);
		max-width: 300px;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: PingFang SC;
	}

	.mine-top-vip {
        border-style: solid;
        border-color: rgba(194, 172, 126, 1);
        border-width: 2px;
		margin-left: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 2px;
		border-radius: 1px;
	}

	.mine-top-vip-inner {
		height: 25px;
		padding: 0 5px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		line-height: 25px;
		/* font-family: PingFangSC; */
		font-weight: 400;
		background-color: #c2ac7e;
		opacity: 0.6;
		color: rgba(255, 242, 219, 1);
		text-shadow: 1px 1px 0px rgba(131, 101, 59, 0.2);
	}

	.mine-top-more {
		position: absolute;
		right: 16px;
		top: 94px;
		width: 130px;
		height: 30px;
		font-size: 24px;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.5;
	}

	.mine-top-arrow {
		width: 14px;
		height: 30px;
		position: absolute;
		right: 0px;
		top: 2px;
	}

	/* 第二部分：收藏夹、足迹、收货地址 */

    .mine-browse {
        margin: 0 30px;
        /* height: 115px; */
        padding-top: 15px;
        display: flex;
        font-size: 32px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        align-items: center;
        justify-content: space-around;
    }

	.mine-browse text {
		font-size: 24px;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.5;
	}

	.mine-browse-favorite {
		align-items: center;
		flex-grow: 1;
	}

	.mine-browse-footprint {
		align-items: center;
		flex-grow: 1;
	}

	.mine-browse-address {
		align-items: center;
		flex-grow: 1;
	}

	/* 第五部分：常见问题、 留言咨询、 消息通知、 系统设置、 关于我们、 */

	.mine-list {
		margin: 40px 30px 0;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
	}

	.mine-list-item {
		height: 82px;
		position: relative;
		font-size: 28px;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.mine-list-right {
		flex-direction: row;
		align-items: center;
	}


	.mine-list-arrow {
		width: 50px;
		height: 50px;
		font-size: 50px;
		margin-right: 20px;
		color: #cccccc;
	}

	.mine-contact-button {
		position: absolute;
		height: 82px;
		opacity: 0;
		padding: 0;
		top: 0;
		left: 0;
	}

	.mine-list-num {
		position: absolute;
		right: 70px;
		top: 25px;
		width: 30px;
		height: 30px;
		border-radius: 15px;
		font-size: 20px;
		line-height: 30px;
		text-align: center;
		color: #ffffff;
		background-color: #fc5157;
	}

	/* 第六部分：客服信息 */

	.mine-server {
		margin: 40px 30px 0;
	}

	.mine-server-item {
		text-align: center;
		align-items: center;
		font-size: 20px;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(181, 181, 182, 1);
	}

	.mine-server-item text {
		color: #6782c0;
	}

	/* 底部填充的空白块 */

	.gap {
		height: 50px;
	}

    .mine-browse_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        margin-top: 10px;
    }

    .mine-list-item-title {
        font-size: 30px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        margin-top: 2px;
    }
</style>
